<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title="BOM清单列表"
      width="80%"
      @close="handleCancel"
    >
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        class="flex-box"
      >
        <div>
          <el-form-item label="书刊编码" prop="bookCode">
            <el-input
              v-model.trim="queryParams.bookCode"
              placeholder="请输入书刊编码"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="书刊名称" prop="orderName">
            <el-input
              v-model.trim="queryParams.orderName"
              placeholder="请输入书刊名称"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="出版编号" prop="pubNo">
            <el-input
              v-model.trim="queryParams.pubNo"
              placeholder="请输入出版编号"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">
              搜索
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </div>
        <el-button
          type="primary"
          plain
          @click="handleSubmit"
          :disabled="multiple"
        >
          确认
        </el-button>
      </el-form>
      <el-row :gutter="20" style="overflow: auto">
        <el-col :span="12">
          <el-table
            v-loading="loading"
            ref="orderListTable"
            :data="orderList"
            stripe
            border
            style="cursor: pointer"
            @cell-click="handleClick"
            highlight-current-row
          >
            <el-table-column
              label="序号"
              width="55"
              type="index"
              align="center"
            />
            <el-table-column
              label="书刊编码"
              align="center"
              width="160"
              prop="bookCode"
            ></el-table-column>
            <el-table-column
              label="书刊名称"
              align="center"
              prop="orderName"
            ></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-table
            ref="orderRef"
            v-loading="loadingInfo"
            :data="orderListDetails"
            row-key="orderProductId"
            stripe
            border
            style="cursor: pointer"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="55"
            />
            <!-- <el-table-column label="序号" width="80" type="index" align="center" /> -->
            <el-table-column label="品种" prop="breedType" align="center">
              <!-- <template #default="scope">
                                <dict-tag
                                    :options="ems_order_breed_type"
                                    :value="scope.row.breedType"
                                />
                            </template> -->
            </el-table-column>
            <el-table-column label="印色" prop="printColor" align="center">
              <template #default="scope">
                <dict-tag
                  :options="ems_order_print_color"
                  :value="scope.row.printColor"
                />
              </template>
            </el-table-column>
            <el-table-column label="组成" prop="makeUp" align="center">
              <template #default="scope">
                <dict-tag
                  :options="ems_order_make_up"
                  :value="scope.row.makeUp"
                />
              </template>
            </el-table-column>
            <!-- <el-table-column label="规格" prop="spec" align="center">
              <template #default="scope">
                <dict-tag :options="ems_order_spec" :value="scope.row.spec" />
              </template>
            </el-table-column> -->
            <el-table-column
              label="印张"
              width="120"
              prop="printSheet"
              align="center"
            ></el-table-column>
            <el-table-column label="颜色" prop="color" align="center">
              <template #default="scope">
                <dict-tag
                  :options="ems_produce_color"
                  :value="scope.row.color"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div class="footer">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { getMesOrderInfo, getMesOrderDetail } from "@/api/production/order";
const route = useRoute();
const emit = defineEmits(["changeUpdate", "cancel"]);
const { proxy } = getCurrentInstance();
const {
  ems_order_breed_type,
  ems_order_print_color,
  ems_order_make_up,
  ems_produce_color,
} = proxy.useDict(
  "ems_order_print_color",
  "ems_order_breed_type",
  "ems_order_make_up",
  "ems_produce_color"
);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  orderSelectList: {
    type: Array,
    default: () => {
      [];
    },
  },
});

const orderRef = ref(null);
const orderList = ref([]);
const orderListDetails = ref([]);
const multiple = ref(true);
const selectRow = ref([]);
const loading = ref(false);
const loadingInfo = ref(false);
const orderListTable = ref(null);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  status: 1,
  // dataType: '2',
  orderNo: undefined,
  orderName: undefined,
});
watch(
  () => props.visible,
  (val) => {
    if (val) {
      handleQuery();
      nextTick(() => {
        orderRef.value.clearSelection();
        if (props.orderSelectList.length > 0) {
          props.orderSelectList.forEach((item) => {
            orderRef.value.toggleRowSelection(item, true);
          });
        }
      });
    }
  }
);
const total = ref(0);
// 选中订单
const handleClick = (row) => {
  orderRef.value.clearSelection();
  loadingInfo.value = true;
  // const isUsed = route.query?.id ?? 1
  // isUsed: isUsed
  getMesOrderDetail({ pid: row.pid, printCategory: "2" }).then((res) => {
    if (Array.isArray(res.data.orderBreed)) {
      res.data.orderBreed.forEach((item) => {
        item.packInNum = row.packInNum;
        item.printNo = row.printNo;
        item.packageRequire = row.packageRequire;
        item.packWay = row.packWay;
        item.fileDate = row.fileDate;
        item.pubNo = row.pubNo;
        item.bookName = row.orderName;
        item.bookNo = row.bookNo;
        item.bookCode = row.bookCode;
        item.printNum = row.printNum; // 印刷次数
        item.fixPrice = row.fixPrice;
        item.sampleNo = row.sampleNo;
        item.subjectType = row.subjectType?.toString();
        item.breed = item.breedType?.toString();
        item.composition = item.makeUp?.toString();
        item.orderProductId = item.pid;
        item.detail = item.specifics;
        item.sheet = item.printSheet;
        item.kaoban = "1";
        item.orderNo = row.orderNo;
        item.publishingHouse = row.publishingHouse; // 出版社
        item.boardsCount = item.printColor
          ? printColorToLable(item.printColor) *
            (Math.ceil(Number(item.printSheet)) || 0)
          : 0;
      });
    }

    // if (Array.isArray(res.data.orderProduct)) {
    //   res.data.orderProduct = res.data.orderProduct.map((item) => {
    //     item.orderId = row.pid;
    //     item.finishSize = item.dimension;
    //     item.orderProductId = item.pid;
    //     item.bookName = row.orderName;
    //     item.bookCode = row.bookCode;
    //     item.bookNo = row.bookNo;
    //     // item.produceCount = row.printingCount // 印数
    //     item.sampleNo = row.sampleNo;
    //     item.breed = item.breedType;
    //
    //     item.kaoban = "1";
    //     item.paperSpecifications = row.spec; //纸张规格
    //     const matchedObj = res.data.orderNeiwen.find(
    //       (obj) => item.breedPid === obj.breedPid
    //     );
    //     const orderBreedObj = res.data.orderBreed.find(
    //       (obj) => item.breedPid === obj.pid
    //     );
    //     if (orderBreedObj) {
    //       item.orderPrintCount = orderBreedObj.printCount; // 印刷数量 下单印数先默认等于印刷数量
    //     }
    //     if (matchedObj) {
    //       matchedObj.detail = `目录${matchedObj.catalogueBegin}-${matchedObj.catalogueEnd} ,正文${matchedObj.textBegin}-${matchedObj.textEnd}`;
    //       return {
    //         ...item,
    //         textPlateCount: matchedObj.printSheet,
    //         sheet: matchedObj.printSheet,
    //         ...matchedObj,
    //       };
    //     }
    //     return item;
    //   });
    // }
    orderListDetails.value = res.data.orderBreed;
    loadingInfo.value = false;
  });
};
const printColorToLable = (row) => {
  const resp = ems_order_print_color.value.filter((item) => item.value == row);
  return eval(resp[0].label);
};
// 选中
const handleSelectionChange = (row) => {
  selectRow.value = row;
  multiple.value = !row.length;
};
const handleSubmit = () => {
  emit("changeUpdate", selectRow.value);
};
const handleCancel = () => {
  orderListDetails.value = [];
  proxy.resetForm("queryRef");
  emit("cancel");
};
const getList = async () => {
  loading.value = true;
  const res = await getMesOrderInfo(queryParams.value);
  if (res.rows.length > 0) {
    orderListTable.value.setCurrentRow(res.rows[0]);
  } else {
    orderListDetails.value = [];
  }
  loading.value = false;
  orderList.value = res.rows;
  // orderList.value.length > 0 && handleClick(orderList.value[0])
  if (orderList.value.length > 0) {
    handleClick(orderList.value[0]);
  } else {
    orderListDetails.value = [];
  }
  total.value = res.total;
};
// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  orderListDetails.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
};

// getList()
</script>

<style lang="scss" scoped></style>
